<template>
  <div class='pie-content'>
    <div class="chart" ref="chart"></div>
    <ul class="explain">
      <li v-for="(item,index) in data" :key="index">
        <div class="name">
          <i class="round" :style="{'background-color': chartColor[item.name]}"></i>
          {{item.keyName}}
        </div>
        <div class="value">{{item.value}}%</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { secondToString } from 'src/assets/js/util'
import echarts from 'echarts'

export default {
  name: 'cur-status',
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          process: 0, // 加工
          stop: 0, // 停机
          breaks: 0, // 断开
          offLine: 0, // 离线
          alarm: 0, // 报警
          changeLine: 0, // 换线
          fault: 0, // 故障
          repair: 0 // 维修
        }
      }
    },
    total: {
      type: Number || String,
      default: 0
    }
  },
  data () {
    return {
      chart: null,
      chartColor: {
        process: '#18D77F', // 加工
        stop: '#FF8559', // 停机
        breaks: '#999999', // 断开
        offLine: '#666666', // 离线
        alarm: '#E43434', // 报警
        changeLine: '#AC70F2', // 换线
        fault: '#F7B82D', // 故障
        repair: '#44D8C6' // 维修
      },
      data: [],
      chartsData: [],
      explain: {
        process: '加工',
        stop: '停机',
        breaks: '断开',
        offLine: '离线',
        alarm: '报警',
        changeLine: '换线',
        fault: '故障',
        repair: '维修'
      }
    }
  },
  watch: {
    info () {
      this.changeInfo()
    }
  },
  mounted () {
    this.changeInfo()
    window.addEventListener('resize', () => {
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      } else {
        this.chart.resize()
      }
    })
  },
  methods: {
    changeInfo () {
      let data = []
      for (let key in this.info) {
        data.push({
          value: this.info[key],
          keyName: this.explain[key],
          name: key,
          time: secondToString(this.info[key])
        })
      }
      data = data.map(item => {
        return {
          ...item,
          value: item.value ? (item.value / this.total * 100).toFixed(2) : 0
        }
      })
      this.data = data
      this.chartsData = data.filter(item => item.value !== 0).sort(function (a, b) {
        return b.value - a.value
      })
      if (this.chartsData.length > 0) {
        this.setOption(this.chartsData)
      } else {
        this.setOption(this.data)
      }
    },
    setOption (data) {
      let self = this
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: (res) => {
            let htmlStr = '<div>'
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;font-size:14px;border-radius:5px;background-color:' + self.chartColor[res.data.name] + ';"></span>'
            htmlStr += `${res.data.keyName}：${res.data.time}`
            htmlStr += '</div>'
            return htmlStr
          }
        },
        grid: {
          bottom: 0,
          left: 0,
          right: 0,
          top: 0
        },
        calculable: true,
        polar: {
          center: ['50%', '50%'],
          radius: '90%'
        },
        radiusAxis: {
          // 极坐标半径刻度
          min: 0,
          max: function (value) {
            return data[0].value
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            align: 'left',
            formatter: '{value} %',
            color: '#999999',
            fontSize: 10,
            margin: -5
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#d3d3d3'
            }
          }
        },
        angleAxis: {
          type: 'category',
          clockwise: false,
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              width: 1,
              type: 'dashed',
              color: '#d3d3d3'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#d3d3d3'
            }
          }
        },
        series: [{
          name: '',
          type: 'pie',
          clockwise: false,
          radius: ['10%', '90%'],
          center: ['50%', '50%'],
          roseType: 'area',
          hoverOffset: 0,
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return self.chartColor[params.name]
              }
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }]
      }
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang='stylus' scoped>
  .pie-content{
    display flex
    align-items center
    .chart{
      flex 1
      height 220px
    }
    .explain{
      margin-left 10px
      width 140px
      li{
        display inline-block
        width 50%
        &:nth-child(odd){
          /*margin-right 3px*/
        }
        .round{
          margin-right 5px
          display inline-block
          width 10px
          height 10px
          border-radius 5px
        }
        .name{
          margin 19px 0 9px
        }
      }
    }
  }
</style>
